<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="bg-gray-100 min-h-[1024px]">
    <a-carousel :dots="true" autoplay>
      <!-- 精装公寓 -->
      <div class="relative h-[500px] w-full overflow-hidden">
        <img src="https://ai-public.mastergo.com/ai/img_res/e4f0482ba084b96395da53f0a89487ad.jpg" 
             class="w-full h-full object-cover object-center" alt="精装公寓">
        <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent">
          <div class="container mx-auto px-8 h-full flex flex-col justify-center">
            <h1 class="text-5xl font-bold text-white mb-4">品质生活 精致空间</h1>
            <p class="text-xl text-white/90">城市核心区 尊贵精装办公空间</p>
          </div>
        </div>
      </div>

      <!-- 地铁房源 -->
      <div class="relative h-[500px] w-full overflow-hidden">
        <img src="https://ai-public.mastergo.com/ai/img_res/8f1f68a1707d45eabbcbe2980d3e9c16.jpg"
             class="w-full h-full object-cover object-center" alt="地铁房源">
        <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent">
          <div class="container mx-auto px-8 h-full flex flex-col justify-center">
            <h1 class="text-5xl font-bold text-white mb-4">便捷交通 品质生活</h1>
            <p class="text-xl text-white/90">地铁0距离 生活更轻松</p>
          </div>
        </div>
      </div>

      <!-- 品质豪宅 -->
      <div class="relative h-[500px] w-full overflow-hidden">
        <img src="https://ai-public.mastergo.com/ai/img_res/e614657e4565e1d4c5a5490873f71f05.jpg"
             class="w-full h-full object-cover object-center" alt="品质豪宅">
        <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent">
          <div class="container mx-auto px-8 h-full flex flex-col justify-center">
            <h1 class="text-5xl font-bold text-white mb-4">尊贵人生 品质生活</h1>
            <p class="text-xl text-white/90">独享私密花园 尽显尊贵身份</p>
          </div>
        </div>
      </div>

      <!-- 优质合租 -->
      <div class="relative h-[500px] w-full overflow-hidden">
        <img src="https://ai-public.mastergo.com/ai/img_res/a4bc3bbc550cc2f29c0d96200f961fde.jpg"
             class="w-full h-full object-cover object-center" alt="优质合租">
        <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent">
          <div class="container mx-auto px-8 h-full flex flex-col justify-center">
            <h1 class="text-5xl font-bold text-white mb-4">品质合租 潮流生活</h1>
            <p class="text-xl text-white/90">志同道合 轻松社交</p>
          </div>
        </div>
      </div>

      <!-- 商铺办公 -->
      <div class="relative h-[500px] w-full overflow-hidden">
        <img src="https://ai-public.mastergo.com/ai/img_res/8bde0a795a7f388e9b00e748acdb41af.jpg"
             class="w-full h-full object-cover object-center" alt="商铺办公">
        <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent">
          <div class="container mx-auto px-8 h-full flex flex-col justify-center">
            <h1 class="text-5xl font-bold text-white mb-4">商务办公 精英选择</h1>
            <p class="text-xl text-white/90">核心商圈 配套完善</p>
          </div>
        </div>
      </div>
    </a-carousel>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';

onMounted(() => {
  document.title = '高端地产展示';
});
</script>

<style scoped>
:deep(.ant-carousel .slick-dots) {
  margin-bottom: 24px;
}

:deep(.ant-carousel .slick-dots li button) {
  background: #ffffff;
  opacity: 0.7;
  height: 3px;
  border-radius: 2px;
}

:deep(.ant-carousel .slick-dots li.slick-active button) {
  opacity: 1;
  width: 24px;
}
</style>

